@import (reference) '../../variable.less';

@font-size: 14px;
@item-h: 10px;

.wea-edc-rule-pane {
  padding: @font-size 0;

  & > div:first-child {
    padding-right: 10px;
  }
  .rule-intr {
    font-size: @font-size;
    padding-bottom: @font-size;
    
    & > p {
      padding-bottom: @font-size;
    }
  }
  img {
    width: 100%;
  }
  button {
    padding: 5px 30px;
  }
  .btn-new-rule {
    width: 100%;
    font-size: @font-size;
    padding: 10px;
  }
  .wea-edc-rule-item {
    position: relative;
    cursor: pointer;
    padding: @item-h;
    font-size: @font-size;
    margin-bottom: @item-h;
    color: @main-color;
    border: 1px solid @border-color;
    
    &:hover {
      i { display: block;}
    }
    &.active {
      background: @bg-color-light;
    }
    span {
      display: inline-block;
      text-align: right;
      width: 80px;
      padding-right: 16px;
      color: @font-color-light;
      vertical-align: top;
    }
    i {
      position: absolute;
      display: none;
      top: 8px;
      right: 4px;
      color: @error-color;
      font-weight: 600;
      width: 20px;
    }
  }

  .rule-settings-container {
    ul {
      padding: 3px 0;
      margin: 7px 0;
      min-height: 125px;
      border: 1px solid @border-color;

      li {
        padding: 3px;
        cursor: pointer;

        &.active {
          color: @main-color;
          background: @bg-color-light;
        }

        &:hover {
          color: @main-color;
        }
      }
    }
  }
}